import { Button, Input, Modal, message } from "antd";
import { useState } from "react";
import { CopyOutlined } from "@ant-design/icons";
import copy from "copy-to-clipboard";
import { useNavigate } from "react-router-dom";

const VideoTest = () => {
  const [visiable, setVisiable] = useState(false);
  const [roomId, setRoomId] = useState<string>("");
  const [jionId, setJionId] = useState("");
  const navigate = useNavigate();

  const meetingId = () => Math.floor(Math.random() * 100000000).toString();

  const handleClick = () => {
    if (!jionId) {
      message.error("会议号不能为空");
      return;
    }
    navigate(`/video?type=answer`, {
      state: {
        id: jionId,
      },
    });
  };
  const toVideo = () => {
    setVisiable(false);
    navigate(`/video?type=offer`, {
      state: {
        id: roomId,
      },
    });
  };
  const createRoom = () => {
    setVisiable(true);
    setRoomId(meetingId());
  };

  const handleCopy = () => {
    copy(roomId);
    message.success("会议号已复制到剪贴板");
  };

  return (
    <div
      style={{
        display: "flex",
        width: "600",
        height: "550px",
        alignItems: "center",
        flexDirection: "column",
        justifyContent: "center",
      }}
    >
      <div style={{ width: "300px" }}>
        <Input
          placeholder="请输入会议号"
          onChange={(e: any) => setJionId(e.target.value)}
        />
      </div>
      <div style={{ marginTop: "50px" }}>
        <Button onClick={createRoom}>创建会议号</Button>
        <Button
          type="primary"
          onClick={handleClick}
          style={{ marginLeft: "20px" }}
        >
          加入会议号
        </Button>
      </div>
      <Modal open={visiable} onCancel={() => setVisiable(false)} onOk={toVideo}>
        <p>
          会议号：{roomId ? roomId : "暂无会议号信息"}
          {roomId && <CopyOutlined onClick={handleCopy} />}
        </p>
        <p style={{ display: "flex", alignItems: "center" }}>
          面试官名字：
          <div style={{ width: "300px" }}>
            <Input placeholder="请输入名字" />
          </div>
        </p>
      </Modal>
    </div>
  );
};

export default VideoTest;
